<template>
  <Card title="每栋楼充电次数比例" :loading="loading">
    <div ref="chartRef" :style="{ width, height }"></div>
  </Card>
</template>
<script lang="ts" setup>
  import { Ref, ref, watch, computed } from 'vue';
  import { Card } from 'ant-design-vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { Item } from '../data';
  const props = defineProps({
    loading: Boolean,
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },
    pieCountList: {
      type: Array<Item>,
      default: [],
    },
  });

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const dataList = ref<Item[]>([]);

  watch(
    () => props.pieCountList,
    (data) => {
      dataList.value = data?.[0]?.dataValue?JSON.parse(data[0].dataValue):[];
    },
    { deep: true, immediate: true }
  );

  const axleList = computed(() => {
    return dataList.value.map((item: Item) => {
      return {
        value: item.ChargingCount,
        name: item.Building,
      };
    });
  });

  watch(
    () => props.loading,
    () => {
      if (props.loading) {
        return;
      }
      setOptions({
        tooltip: {
          trigger: 'item',
        },

        series: [
          {
            name: '充电次数（单位：次）',
            type: 'pie',
            radius: '80%',
            center: ['50%', '50%'],
            color: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#FF5733','#33FF57' ,'#33A1FF', '#FFD700'],
            data: axleList.value.sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: 'radius',
            animationType: 'scale',
            animationEasing: 'exponentialInOut',
            animationDelay: function () {
              return Math.random() * 400;
            },
          },
        ],
      });
    },
    { immediate: true }
  );
</script>
